<template>
    <div id="shellHK">
        <div v-if="tickinfo.invoiceState !== '0' &&tickinfo.invoiceState !== ''" class="shuiyin">
          <!-- 失控-1 -->
          <img v-if="tickinfo.invoiceState === '1'" :src="imgSK"/>
          <!-- 作废-2 -->
          <img v-if="tickinfo.invoiceState === '2'" :src="imgZF"/>
          <!-- 红冲-3 -->
          <img v-if="tickinfo.invoiceState === '3'" :src="imgHC"/>
          <!-- 异常-4 -->
          <img v-if="tickinfo.invoiceState === '4'" :src="imgYC"/>
        </div>

        <div class="electronic_title">
            <div class="title">航空运输电子行程单</div>
            <p>ITINERARY/RECEIPT OF E-TICKET FOR AIR TRANSPORT</p>
            <img class="yz" :src="imgZL" />
        </div>

        <div class="electronic_others">
            <span>印刷序号：</span>
            <span>{{ tickinfo.invoiceCode }}</span>
        </div>

        <div id="rightBar">
            付款凭证
            <br/>
            <br/> <br/> <br/>
            <br/> <br/>手开无效 <br/>
        </div>
        <div class="electronic_table">
            <div class="tableRow1">
                <div class="table_name">
                    <div>旅客姓名</div>
                    <p>{{ tickinfo.passenger}}</p>
                </div>
                <div class="table_identity">
                    <div>有效身份证件号码</div>
                    <p>{{ tickinfo.identityNumber}}</p>
                </div>
                <div class="table_remark">
                    <div>签注</div>
                    <p>{{ tickinfo.remark}}</p>
                </div>
            </div>
            <div class="tableRow2">
                <div style="width: 14.21%;font-size: 18px;color: #333333">{{ tickinfo.trainNumber}}</div>
                <div style="width: 7.34%">承运人</div>
                <div style="width: 7.34%">航班号</div>
                <div style="width: 7.34%">座位等级</div>
                <div style="width: 10.12%">日期</div>
                <div style="width: 10.12%">时间</div>
                <div style="width: 14.21%">客票级别/客票类别</div>
                <div style="width: 10.12%">客票生效日期</div>
                <div style="width: 10.12%">有效截止日期</div>
                <div style="width: 9.08%">免费行李</div>
            </div>
            <div class="tableRow3">
                <div class="tableRow3_column" style="width: 14.21%;font-size: 18px;color: #333333;text-align: left">
                    <span>自</span>
                    <span>{{ tickinfo.departCity}}</span>
                    <span>至</span>
                    <span>{{ tickinfo.arriveCity}}</span>
                </div>
                <div class="tableRow3_column" style="width: 7.34%">
                    <span></span>
                    <span></span>
                </div>
                <div class="tableRow3_column" style="width: 7.34%">
                    <span></span>
                    <span>{{ tickinfo.flightNumber}}</span>
                </div>
                <div class="tableRow3_column" style="width: 7.34%">
                    <span></span>
                    <span>{{ tickinfo.seatLevel}}</span>
                </div>
                <div class="tableRow3_column" style="width: 10.12%">
                    <span></span>
                    <span>{{ tickinfo.startDate}}</span>
                    <span></span>
                    <span>{{ tickinfo.endDate}}</span>
                </div>
                <div class="tableRow3_column" style="width: 10.12%">
                    <span></span>
                    <span>{{ tickinfo.drivingTime }}</span>
                </div>
                <div class="tableRow3_column" style="width: 14.21%">
                    <span></span>
                    <span></span>
                </div>
                <div class="tableRow3_column" style="width: 10.12%">
                    <span></span>
                    <span></span>
                </div>
                <div class="tableRow3_column" style="width: 10.12%">
                    <span></span>
                    <span></span>
                </div>
                <div class="tableRow3_column" style="width: 9.08%">
                    <span></span>
                    <span></span>
                </div>
                <div style="clear: both"></div>
                <div class="tableRow3_from">
                    <div class="tableRow3_from_detail" style="height: 45px">
                        <div style="width: 14.21%;text-align: left;border-top:1px solid #fff;margin-top:-1px;">&nbsp;</div>
                        <div style="width: 14.68%;">
                            <div>票价</div>
                            <p>CNY {{ toDecimal2(tickinfo.fare) }}</p>
                        </div>
                        <div style="width: 17.46%;">
                            <div>机场建设费</div>
                            <p>CNY {{ toDecimal2(tickinfo.caacDevelopmentFund) }}</p>
                        </div>
                        <div style="width: 14.33%;">
                            <div>燃油附加费</div>
                            <p>EXEMPT {{ toDecimal2(tickinfo.fuelSurcharge) }}</p>
                        </div>
                        <div style="width: 10%;">
                            <div>其他税费</div>
                            <p>{{ toDecimal2(tickinfo.otherTaxes) }}</p>
                        </div>
                        <div style="width: 29.32%;">
                            <div>合计</div>
                            <p>CNY {{ toDecimal2(tickinfo.totalAmount) }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tableRow4">
                <div class="tableRow4_item" style="width: 28.89%;">
                    <div>电子客票号码</div>
                    <p>{{ tickinfo.electronicTicketNumber}}</p>
                </div>
                <div class="tableRow4_item" style="width: 17.46%;">
                    <div>验证码</div>
                    <p></p>
                </div>
                <div class="tableRow4_item" style="width: 34.45%;">
                    <div>提示信息</div>
                    <p></p>
                </div>
                <div class="tableRow4_item tableRow4_item_left" style="width: 19.2%;">
                    <div>保险费</div>
                    <p>{{ toDecimal2(tickinfo.insurance) }}</p>
                </div>
            </div>
            <div class="tableRow5">
                <div class="tableRow4_item" style="width: 28.89%;">
                    <div>销售单位代号</div>
                    <p>{{ tickinfo.agentCode}}</p>
                </div>
                <div class="tableRow4_item" style="width: 41.79%;">
                    <div>填开单位</div>
                    <p>{{ tickinfo.issueBy}}</p>
                </div>
                <div class="tableRow4_item" style="width: 29.32%;">
                    <div>填开日期</div>
                    <p>{{ tickinfo.dateOfIssue}}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import popdata from "./common";
export default {
    mixins: [popdata],
    data() {
        return {};
    },
    props: {
        tickinfo: {}
    }
}
</script>

<style scoped lang="scss">
$f1: 'STKaiti';
$f2: 'STZhongsong';
$color1:#904e31;
$color2: #4a5ee5;
#shellHK {
    font-size: 14px;
    line-height: 20px;
    height: inherit;
    background: rgba(246, 252, 255, 1);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
* { box-sizing: border-box; margin: 0; }

    .electronic_title {
        position: absolute;
        text-align: center;
        margin-top: 25.13333333333333px;
        color: #262F34;
        margin-left: 50%;
        transform: translateX(-50%);
        margin-left: 50%;
        transform: translateX(-50%);
        .title {
            font-family: 'STKaiti';
            font-size: 24.488888888888887px;
            letter-spacing: 2.2555555555555555px;
            margin-left: 6.444444444444444px;
            margin-right: 6.444444444444444px;
        }
        p {
            font-family: 'STKaiti';
            width: 200px;
            font-size: 12px;
            margin: 10px auto;
            color: #666;
        }
        img {
            position: absolute;
            top: 2.9px;
            transform: translateX(-50%);
            height: 81.19999999999999px;
            z-index: -10;
            opacity: 0.8;
            left: 50%;
        }
    }
    .electronic_others {
        position: absolute;
        top: 100.533333px;
        left: 640.022222px;
        font-size: 13.822222222222221px;
        span {
            font-size: 12px !important;
            &:first-child {
                color: #262F34;
            }
            &:nth-child(2) {
                font-family: 'STZhongsong';
            }
        }
    }
    .electronic_table {
        position: absolute;
        border: 1px solid #262F34;
        box-sizing: border-box;
        top: 123.73333333333332px;
        left: 22px;
        width: 800.2333333333333px;
        height: 384px;
        margin-top: 0;
        padding-bottom: 0;
        .tableRow1 {
            height: 60px;
            overflow: hidden;
            font-size: 12px;
            text-align: left;
            color: #666666;
            &>div {
                float: left;
                padding: 5px;
                height: inherit;
                box-sizing: border-box;
                white-space: nowrap;
                p {
                    color: #3E3D42;
                    font-size: 18px;
                    font-weight: 500;
                    line-height: 22px;
                    text-align: center;
                    padding-top: 4px;
                }
            }
            .table_name {
                width: 23.75%;
                border-right: 1px solid #262F34;
                border-bottom: 1px solid #262F34;
            }
            .table_identity {
                width: 32.85%;
                border-right: 1px solid #262F34;
                border-bottom: 1px solid #262F34;
            }
            .table_remark {
                width: 43.4%;
                border-bottom: 1px solid #262F34;
            }
        }
        .tableRow2 {
            height: 36px;
            line-height: 30px;
            border-bottom: 1px solid #262F34;
            overflow: hidden;
            font-size: 12px;
            text-align: center;
            color: #666666;
            &>div {
                float: left;
                padding: 3px;
                height: inherit;
                box-sizing: border-box;
                white-space: nowrap;
                &+div {
                    border-left: 1px solid #262F34;
                }
            }
        }
        .tableRow3 {
            height: 197px;
            overflow: hidden;
            border-bottom: 1px solid #262F34;
            box-sizing: border-box;
            .tableRow3_column{
                height: 152px;
                float: left;
                text-align: center;
                padding: 5px;
                &+ .tableRow3_column{
                    border-left: 1px solid;
                }
                &>span {
                    display: inline-block;
                    &:nth-child(2n+1) {
                        height: 15px;
                        color: #666;
                    }
                    &:nth-child(2n+2) {
                        line-height: 16px;
                        padding: 8px 0 6px;
                        color:#3E3D42;
                        min-height: 24px;
                    }
                }
            }
            .tableRow3_from {
                .tableRow3_from_detail {
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    box-sizing: border-box;
                    border-top:1px solid;
                    &> div {
                        float: left;
                        height: inherit;
                        box-sizing: border-box;
                        white-space: nowrap;
                        &:nth-child(n+2) {
                            background-color: #faeede;
                            padding: 5px;
                            border-left: 1px solid;
                            &>div {
                                text-align: left;
                                font-size: 12px;
                                font-weight: 400;
                                color: #666666;
                                line-height: 15px;
                            }
                            &> p{
                                font-size: 14px;
                                font-weight: 500;
                                color: #3e3d42;
                                line-height: 25px;
                            }
                        }
                    }
                }
            }
        }
    }
    #rightBar {
        position: absolute;
        color: #666666;
        font-size: 12px;
        width: 9.666666666666666px;
        top: 202px;
        left: 827px;
        line-height: 15px;
    }
}

#shellHK .tableRow4{
    height: 45px;
    overflow: hidden;
    border-bottom: 1px solid #262F34;
    box-sizing: border-box;
}
#shellHK .tableRow5{
    height: 45px;
    overflow: hidden;
    box-sizing: border-box;
}

.tableRow4_item{
    float: left;
    text-align: center;
    padding: 7px 5px;
    height: 45px;
}
.tableRow4_item_left {
    border-left: 1px solid;
}
.tableRow4_item>div{
    text-align: left;
    font-size: 12px;
    font-weight: 400;
    color: #666666;
    line-height: 10px;
}
.tableRow4_item>p{
    font-size: 14px;
    font-weight: 500;
    color: #3e3d42;
    line-height: 25px;
}
#shellHK .table > div > span {
    display: block;
    border-right: 1px solid #262F34;
    border-bottom: 1px solid #262F34;
    height: 100%;
    float: left;
}

#shellHK .table > div > span:nth-child(odd) {
    color: #262F34;
    font-family: $f1;
    font-size: 13.855555555555554px;
    text-align: center;
    line-height: 16px;
}

#shellHK .table > div > span:nth-child(even) {
    color: $color2;
    font-family: 'STZhongsong';
    font-size: 13.855555555555554px;
    line-height: 16px;
}

#shellHK #aa {
    margin-left: 0;
    text-align: center;
}

#shellHK #aaa {
    margin-left: 6px;
    letter-spacing: 1px;
    line-height: 16px;
}

#shellHK .bb > span:nth-child(odd) {
    text-align: center;
    padding-top: 6px;
}

#shellHK .cc > span:nth-child(odd) {
    text-align: center;
    padding-top: 1px;
}

#shellHK .cc > span:nth-child(even) {
    font-family: $f2;
    padding-left: 9.666666666666666px;
    padding-top: 0px;
}


#shellHK #bottomBar {
    position: absolute;
    top: auto;
    bottom: 16px;
    left: 32.22222222222222px;
}

#shellHK #bottomBar > div:not(:nth-child(3)) {
    display: inline-block;
    font-family: $f1;
    color: #262F34;
    font-size: 13.855555555555554px;
}

#shellHK #bottomBar > div:nth-child(3) {
    display: inline-block;
    font-family: $f2;
    font-size: 13.855555555555554px;
}

#shellHK .bb > span:nth-child(even),
.ab {
    padding-left: 9.666666666666666px;
    padding-top: 6px;
}

#shellHK .ab {
    padding-top: 6.444444444444444px;
}

#shellHK #xxsz {
    font-family: $f2;
    font-size: 13.855555555555554px;
    color: $color2;
}

#shellHK #xxsz2 {
    font-size: 13.855555555555554px;
}

#shellHK #xxsz3 {
    font-family: $f1;
    color: #262F34;
    font-size: 13.855555555555554px;
}

/* 水印 */
.shuiyin {
    width: 100%;
    text-align: center;
    top: 40%;
    left: 43.5px;
    font-size: 130.5px !important;
    letter-spacing: 87px;
    position: absolute;
    opacity: 0.5;
    color: #d55;
}
</style>
